<template>
  <div class="searchBox">
    <div class="search-collapsible">
      <div class="clearfix searchGray">
          <i class="fl search-btn" @click="searchHandler"></i>
          <input type="text" id="searchword" class="search-txt" placeholder="输入您要找的商品" v-model="keyword" maxlength="30" v-on:keyup.13="searchHandler" >
      </div>
      <a href="javascript:void(0);" @click="searchHandler" class="searchCancel">搜索</a>
    </div>
    <ul class="memberList" v-scroll="scrollEvent">
      <memberItem 
                     v-for="(item,index) in proList" :key="index"
                        :item="item"
                        :increaseFn="increase"
                        :decreaseFn="decrease" />
    </ul>
        <!-- 弹窗 -->
        <productMethods ref="productMethods"/>
        <packageProduct ref="packageProduct"/>
  </div>
</template>
<script>
import productMethods from "@/components/productMethods/productMethods.vue"
import packageProduct from "@/components/packageProduct/packageProduct.vue"
import { mapState } from "vuex";
import {GetProductList} from '@/api/order.js'
import memberItem from "@/components/index/memberItem.vue"
import cartmixin from "@/components/common/cart-mixin";
export default {
  name: 'productList',
  mixins:[cartmixin],
  components: {
    productMethods,
    packageProduct,
    memberItem
  },
  props: {
    msg: {
        type: String,
        default:'富苑餐饮'
    }
  },
  computed: {
      ...mapState({
          shoppingList: (state) => state.cartModule.shoppingList,
      })
  },
  data(){
    return {
        categoryId: null,
        type: -1,
        keyword: '',
        pageIndex: 1,
        proList: [],
        loading: false
    }
  },
  // created(){
  //   this.pageIndex = 1;
  //   this.reqGetProductList();
  // },
  methods:{
    searchHandler(){
      this.proList = []
      this.reqGetProductList();
    },
    scrollEvent(eve){
      //console.log(eve.srcElement.scrollTop)
      if (eve.srcElement.scrollTop + eve.srcElement.offsetHeight > eve.srcElement.scrollHeight - 10 && !this.loading) {
        this.loading = true
        this.pageIndex++
        this.reqGetProductList()
      }
    },
    itemQty(item){
        let qty = 0;
        for (let i of this.shoppingList) {
            if (i.productId == item.productId) {
                qty++;
            }
        }
        return qty;
    },
    async reqGetProductList() {
        let params = {
            categoryId: this.categoryId,
            type: this.type,
            keyword: this.keyword,
            pageIndex: this.pageIndex,
        };
        let { returnData = false } = await GetProductList(params);
        if (returnData == false) return;
        if (returnData.data.length <= 0) return;
        let arr = returnData.data;
        this.loading = false
        arr.forEach((item) => {
            item.qty = 0;
        });
        if (this.pageIndex == 1) {
            this.proList = arr;
        } else {
            this.proList.push(...arr);
        }
    },
  }
}
</script>
<style>
  html,body{
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
  @import '@/assets/scss/index.scss';
  .searchBox{
    .search-collapsible{ position: relative; left: 0; right: 0; border-bottom: 1px solid #dedede; background-color: rgba(255,255,255,1); overflow: hidden;
      .searchWhite{ margin: 0.5rem 0 0.5rem 0.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 0.6rem; color: #fff; background-color: #fff; width: 80%;border-radius: 0.2rem;
        .search-btn{ display: block; padding: 0.24rem; width: 1.02rem; height: 1.02rem; background: url(~@/assets/searchIcon_grey.png) no-repeat; background-size: 60%; background-position: 50%;}
        .search-txt{ float: left; margin: 0.25rem 0; padding:0.2rem; width: 70%; color: #606060; background-color: transparent; border: none; outline: none;
          &::-webkit-input-placeholder{ color: #606060;}
        }
      }
      .searchGray{ margin: 0.5rem 2.8rem 0.5rem 0.5rem; height: 1.5rem; line-height: 1.5rem; font-size: 0.6rem; color: #fff; background-color: rgba(246,246,246,1); border-radius: 0.2rem;
        .search-btn{ display: block; padding: 0.24rem; width: 1rem; height: 1rem; background: url(~@/assets/searchIcon_grey.png) no-repeat; background-size: 60%; background-position: 50%;}
        .search-txt{ float: left; margin: 2px 0; padding:0.2rem; width: 75%; color: #606060; background-color: transparent; border: none; outline: none; line-height: normal;
          &::-webkit-input-placeholder{ color: #606060;}
        }
      }
      .searchCancel{ position: absolute; top: 50%; right: 0.5rem; /* z-index: 21; */ font-size: 0.7rem; color: #606060; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
    }
    .memberList{position: absolute; left: 0; right: 0; height:calc(100% - 2.51rem); overflow-y:scroll; font-size: 0.7rem; background-color: #fff;
        .memberItem{ display: flex; display: -webkit-flex;  padding: 0.5rem; border-bottom: 1px solid #dedede;
            .photo{ display: block; width: 4rem; height: 4rem; overflow: hidden; border-radius: 0.3rem; object-fit: cover;}
            .content{ margin-left: 0.5rem; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: space-between; -webkit-justify-content: space-between; flex: 1; -webkit-flex: 1;
                .name{ display: block; font-weight: 700; line-height: 1.5;}
                .stores{ display: inline-block; padding: 0.1rem 0.2rem; color: #ff9908; font-size: 0.6rem; border: 1px solid #ff9908; border-radius: 0.2rem; align-self: flex-start;}
                .company{  display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; line-height: 1.5;   
        .addIcon{ width: 1.2rem; height: 1.2rem; /*background: url(../images/icon/addIcon_cart.png) no-repeat;*/ background-size: cover;}
                }
                .keyWord{ color: #2b59aa; font-weight: normal;}
            }
            // &:last-child{  border-bottom: none;}
        }
        .addSubtWrapper{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
          .total{ width: 4rem;}
          .addSubt{ width: 4rem; height: calc(1rem + 2px); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: flex-end; -webkit-justify-content: flex-end; font-size: 0.8rem; overflow: hidden; white-space: nowrap;}
          .operate{ width: 1rem; height: 1rem; line-height: 1rem;  text-align: center; cursor: pointer; color: #feb229; border: 1px solid $mainColor; border-radius: 4px;
            &:last-child{ border: 1px solid $mainColor; background-image: linear-gradient(to right,$mainColor,#ffae44); color: #fff;}
          }
          .much{ width: calc(100% - 2rem - 2px); background-color: transparent; height: 1rem; line-height: 1rem;  text-align: center; outline: none; border: none; border-radius: 0;}
        }
    }
  }
</style>